<template>
  <div class="param-monitoring" v-if="isWaterStation">
    <div class="class-tree">
      <edit-tree
        ref="tree"
        :treeSetting="treeSetting"
        :hideBtn="hideBtn"
        :haveRemark="false"
        :draggable="false"
        @handleClickTree="handleClickTree"
        @dropNode="dropNode"
        :filterNode="filterNode"
      />
    </div>
    <div class="detail-content">
      <detail-right
        :currentNode="treeNode"
        @refreshTree="refreshTree"
        :currentData="currentData"
        :allTreeData.sync="allTreeData"
        :currentOrg="currentOrg"
      ></detail-right>
    </div>
  </div>
  <div class="param-monitoring" v-else>
    <water-detail
      :currentData="currentData"
      :currentOrg="currentOrg"
    ></water-detail>
  </div>
</template>
<script>
import detailRight from "./detailRight.vue";
import waterDetail from "./waterDetail.vue";
import {
  getTreeRootData,
  getCurrentOrg,
} from "@/api/businessConfigurationManagement/paramMonitoringConfig.js";
export default {
  components: { detailRight, waterDetail },
  data() {
    return {
      isWaterStation:
        localStorage.getItem("currDs") == "water_02" ? true : false,
      treeSetting: {
        btnArr: [],
        title: "监测对象",
        data: [],
        defaultProps: {
          children: "children",
          label: "name",
        },
      },
      hideBtn: true,
      treeNode: null,
      treeNodeId: "",
      currentData: null,
      allTreeData: null,
      currentOrg: this.$store.getters.currentAppInfo,
    };
  },
  mounted() {
    if (!this.$store.getters.currentAppInfo.appCode=='EAM_YCSC') {
        this.getCurrentOrgData();
    }
    if (this.isWaterStation) {
      this.getTreeData();
    }
  },
  created() {},
  methods: {
    async getCurrentOrgData() {
      let param = {
        appId: this.currentOrg.appCode,
        level: 1,
      };
      await getCurrentOrg(param).then(
        (res) => {
          if (res.code == 200) {
            this.currentData = res.data[0] || {};
          }
        },
        (err) => {
          this.$message.error(err);
        }
      );
    },
    //刷新树组织并选中最新节点
    refreshTree(node) {
      this.getTreeData();
      this.treeNodeId = node.id;
      this.handleClickTree(node);
    },
    //获取树组织数据
    async getTreeData() {
      let param = {
        appId: this.currentOrg.appCode,
      };
      await getTreeRootData(param).then(
        (res) => {
          if (res.code == 200 && res.data.length > 0) {
            if (this.treeNodeId == "") {
              this.treeNodeId = res.data[0].id;
              this.treeNode = res.data[0];
            }
            this.allTreeData = res.data;
            this.orginData = JSON.parse(JSON.stringify(res.data));
            this.$set(this.treeSetting, "data", res.data);
            this.$refs.tree.setCurrentKey(this.treeNodeId);
          }
        },
        (err) => {
          this.$message.error(err);
        }
      );
    },
    //筛选树
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //点击树节点
    handleClickTree(node) {
      this.treeNodeId = node.id;
      this.treeNode = node;
      this.treeNode.dataSource = this.currentData.datasource
        ? this.currentData.datasource
        : "";
    },
    dropNode(data) {},
  },
};
</script>

<style lang="less" scoped>
.param-monitoring {
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  border-radius: @kr-bg-board-radius;
  .class-tree {
    height: 100%;
    min-width: 300px;
    //overflow: scroll;
  }
  .detail-content {
    height: 100%;
    width: calc(100% - 300px);
    border-left: 15px solid #f2f3f8;
    flex: 1;
    padding: 20px;
    overflow: auto;
  }
}
</style>
